<template>
<div id="app" class="app-page" >
  <el-row :gutter="40">
    <el-col :span="4">
      <img src="../../assets/logo.png" alt="" width="30%" height="30%">
    </el-col>
    <el-col :span="7"><div class="grid-content ">
      <el-menu :default-active="getPagesPilot" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="Transparent">
        <el-menu-item index="1">
          <i class="el-icon-s-home"/>
          <span>主页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-star-on"/>
          <span>精选</span>

        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-s-grid"/>
          <span>发现</span>

        </el-menu-item>


      </el-menu>
    </div></el-col>
    <el-col :span="7">
      <div style="padding-top: 0.7rem">
        <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchText">
          <!--            clearable="true"-->
          <el-button
              slot="append"
              type="primary"
              @click="search">搜索</el-button>

        </el-input>
      </div>

    </el-col>
    <el-col :span="6" >
      <div style="display: flex; " >
        <div>
          <el-popover
              placement="top-end"
              title="消息"
              width="300"
              trigger="hover">
              <message-component/>
            <el-badge :value="getMessageUnreadNumber" :max="99" class="item" slot="reference" >
              <el-button icon="el-icon-message" circle></el-button>
            </el-badge>
          </el-popover>
        </div>
        <div style="padding-top: 0.5rem;padding-left: 2rem" @click="drawer=!drawer">
          <el-popover
              placement="top"
              title=""
              width="200"
              trigger="hover">
              <info-component/>
            <el-avatar slot="reference"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </el-popover>
        </div>
      </div>
    </el-col>
  </el-row>


</div>
</template>

<script>

import InfoComponent from './info/InfoComponent'
import MessageComponent from './message/MessageComponent'
export default {
  name: "PilotComponent",
  props: {},
  data() {
    return {

      searchText:''

    }
  }, methods: {
    search(){
      this.log(this.searchText)
    },
    log(msg) {
      this.$message(msg);
    },
    handleSelect(key, keyPath) {
      this.log(key+"--->"+keyPath);
    }
  }, watch: {}, computed: {
    bgColor(){
      return this.$store.state.bgColor;
    },
    getMessageUnreadNumber(){
      return this.$store.state.user.message.unread
    },
    getPagesPilot(){
      return this.$store.state.PagesPilotIndex;
    }
  },components:{
    InfoComponent,
    MessageComponent
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.logo{
  display: flex;
  
}
</style>